★首先這篇文章適合以下背景的人閱讀

1. 熟悉 HTML、CSS
2. 正要開始一腳踏進 JavaScript 的初學者

號稱全世界最懶的一群人(軟體工程師)，能坐就不要站，能躺就不要坐，阿不是啦，我是說，不斷重複的事情，軟體工程師我們通常不會想要一直重複做，所以一模一樣的功能，軟體工程師們，寫過一次了，就不會想要在寫一次了，這時候我們就可以用 function 功能了。

function

• 寫法：

function welcome(){
    var hello = 'Welcome here, may I help you ?';
    console.log(hello);
}

welcome();

• 說明：首先先用 function 起頭，空格以後接一個命名後加 ()
  ，上面的範例就是 welcome()，再來接一組 {}，{} 裡面是要放這個 function 要執行的程式碼上面這個範例裡，在 {} 裡面放的就是 var hello = 'Welcome here, may I here you ?'; 以及 console.log(hello) 這兩行程式碼，以上就是完成了一個 function 宣告。最後一行還有一個 welcome();，才是執行這個 welcome() 的 function 的意思。

function 帶參數用法

• 寫法：

function BMI(a,b){
    var result = b/((a/100)**2);
    console.log(result);
}
BMI(178,70);

• 說明：還記得我們宣告了一個 function 後接他的命名之後會接一個 ()，而這個 () 內是要給我們放參數的，在上面的這個範例就是 a 與 b。這是一個計算BMI值的 function，我們用 var result = b/((a/100)**2); 來代表計算BMI值的公式，後面用一個 console.log(result)來把計算的值呈現出來。最後我們用 BMI(178,70); 來執行這個 function，所以大家有猜出來 a 和 b 是什麼了嗎？當然就是身高與體重囉。

全域變數與區域變數

全域變數和區域變數要怎麼解釋呢？很簡單，我們用下面的範例就可以解釋清楚囉

• 範例

var total = 100; //全域變數

function count(a,b){
    var total = a*10 + b*20; //區域變數
    console.log(total);
}
count(10,10);

console.log(total);

• 說明：上方的程式碼我們有看到兩個 var = total，可是一個在 function 外面，一個在 function 裡面，在外面的就是全域變數，在裡面的就是區域變數，而全域變數是在整份程式碼內都有效，而且會被記憶進電腦的記憶體內佔用空間，但是區域變數不一樣，區域變數只有在 function 內有用，當執行完以後，變數隨即被清除，記憶體被釋放，不會佔用空間。所以可以說，這兩個 var total 根本就是不一樣的東西，若是執行 count(10,10) 這個 function 和執行 console.log(total) 就會發現顯示出來的 var total 的值完全不一樣喔。

Hoisting

Hoisting 的中文叫做提升，真正的 Hoisting，是可以講很長很長篇文章的，但無奈菜鳥我現在知識累積有限，所以這裡僅先針對剛學習到的觀念做初步筆記，未來知識量爆棚時，在專文分享。

程式碼的世界，是有先後順序的，由上往下開始運作，當然我們現在介紹的 JavaScript 也不會例外。

• 範例一：

var number = 500;
console.log(number);

• 說明：
  上方的一段短短的程式碼，其實我們可以用膝蓋想就知道，console 一定會顯示 500，因為我們在前方就已經先 var 了一個變數叫 number，而且給他一個值是 500，當程式從上方一路執行下來的時候，因為前方電腦已將 number 變數記錄了起來，所以我們後方叫 console.log 時，就可以順利的把 number 給叫出來了。

• 範例二：

console.log(number);
var number = 500;

• 說明：
  假設今天我們把兩個程式碼的順序對調呢？會發生甚麼事情，console則會顯示 undefined，為什麼不是顯示 500 呢？就是因為順序問題，一開始我們就執行 console.log(number) 但是在這一個 moment，電腦還不認識變數 number，所以他顯示了 undefined，在後面我們才 var number = 500; 個時候電腦才認識了變數 number，但就也僅是認識了，我們後面沒有再執行一個 console.log(number) 所以也就沒有顯示 500了。

我們把狀況再弄複雜一點吧

• 若是在 function 的狀態下會怎麼樣呢？

• 範例三：

console.log(number);
function count(){
    var number = 500;
}
count();

• 說明：若是按照我們前面的經驗，第一行就先執行了一個 console.log，然後前面什麼都沒有，想必應該也是 undefined 吧，但是，人生最重要的就是這個 but，console 卻顯示了 500 怎麼會這個樣子呢？這是因為只要是 function 載入後會，不管程式碼被寫在什麼地方，它都會被提到最上層然後記憶起來，這是 JavaScript 的特性，所以才會顯示 500 喔。

搭配 return 的寫法

• 範例一：

function getHamPrice(num){
    var hamPrice = 50;
    var total = hamPrice * num;
    console.log(total);
}
getHamPrice(10);

• 說明：
  上方這個範例，我們沒有用上 return，通常我們寫一個計算買漢堡價錢的 function，我們會這樣寫，這樣寫也沒有不對但那就像是去小吃店吃飯，結帳的時候老闆娘拿出卡西歐計算機，點點點暗暗暗，給我一個總價，然後卡西歐計算機就歸零了，計算機不會知道這是剛剛哪一桌點了什麼東西多少錢，若要讓這件事情優化，我們可以加 return，讓我們繼續看下一個範例。

• 範例二：

function getHamPrice(num){
    var hamPrice = 50;
    var total = hamPrice * num;
    return total;
}

var tom = getHamPrice(10);
console.log(tom);

• 說明：
  這個範例和上一個很像，但是原本是 console.log(total); 程式碼位置的地方，被改成了 return total;。原本的 getHamPrice(10);，在前方被接上了一個 var tom = 而形成了這一整段的程式碼 var tom = getHamPrice(10),我們 var 了一個變數為 tom，然後讓它賦值為 getHamPrice(10) 這個 function 的結果，而這個 function 是帶有參數的，我們給他一個 (10) 的參數讓他回去運算，最後最後，我們再 console.log(tom); 來顯示一下 tom 的值，此時應該會顯示 500。這樣子的寫法就好像是卡西歐計算機瞬間升級成了 POS 機系統，我們都可以去 var 一個變數來讓它等於我們需要的 function，這樣就可讓 function 可用性增加喔。

• 範例三：

function BMI (a,b){
    var result = b/((a/100)**2);
    return result;
}
var Alec = BMI(178,70);
var Rita = BMI(161,52);

console.log(Alec);
console.log(Rita);

• 說明：
  還記得我們前面的一個 BMI 值範例嗎？若是改用 reture 寫法呢？這樣我們就可以分別的 var 不同的變數，然後都賦值給同一個 function，然後讓 function 帶著不同的參數即可，剩下的就自己研究看看吧。

來把所有的東西都整合在一起吧，簡單的計算機練習

下方是一個簡單的 HTML 網頁，我要讓它執行簡單的計算，當我們輸入相關的數字之後，只要一按計算按鈕，就會跳出正確答案囉，來看一下 codepen 吧。

這個是 HTML 的部分，可以看到我們共有三個 input 欄位，一個是 pizza 的一個 beer 的，要來給我填入數字用的，另一個是按鈕欄位，用來計算用的。

<p>AI 機器人店員：<span id='hello'></span></p>
<p>客人：我需要<input type="text" id="pizzaNum" class="tag">個 Pizza 還有<input type="text" id="beerNum" class="tag">杯啤酒。<input type="button" id="click" value="點餐完成">
</p>
<p>AI 機器人店員：<span id="ok"></span><span id="total"></span></p>

再來下方就是 JavaScript 的部分了，其中還沒有提到的是 onclick 以及 parseInt，我們一個一個來說明。

首先，我們先設定了一個 welcome() 的 function，讓我們在 HTML 碼的 id="hello" 可以至換內容，這樣我們 AI 機器人店員就可以隨著行銷活動的不同而置換不同的歡迎詞囉。

再來就是來到了點餐部分了，首先先利用 document.getElementById('click') 指定了這個 id 的標籤，然後後接 .onclick，這個語法的意思就是這個 id 的標籤被 click 了以後要做甚麼事情，後面接了一個 = 然後再接一個命名為 order 的 function，然後 {} 內就是這個 function 要執行的事情了。

一開始先 var 了三個變數，一個值是字串，兩個值是數字，再 var兩個變數，這兩個變數比較特別，它的值是來自於 HTML 內的 input 標籤的 value，所以我們用 document.getElementById('id名') 的方式來指定那一個標籤，但若要取這個標籤的 value 的值的話，就要在後面加上 .value，這樣我們在網頁上 key-in 數字時就可以透過這樣的方式取出它的值來了。

但是取出來的值雖然看起來長得像是一個數字，但是實際上它的型態是一個字串 (String)，而字串無法用運算子(只能用加的)，數字才可以，但是字串的相加是文字的串接，而數字的相加..........就是數字的相加阿！(不然你期望我告訴你什麼不一樣的事情)，而 parseInt 就是可以將字串轉變成數字的語法，所以放在整個 document.getElementById('id名') 前，就可以轉換取出來的值成為數字，來和後面的變數做加減乘除。

最後我們再利用 document.getElementById('id名') 指定對應的 id 的標籤，然後用 .textContent 的方式來將計算出來的值以及想要置換的文字放回 HTML 的標籤內。

//打招呼
function welcome(){
    var hello = '歡迎光臨！請問想要點什麼呢？';
    document.getElementById('hello').textContent = hello;
}
welcome();

//點餐
document.getElementById('click').onclick = function order(){
  var count = '好的！沒有問題，我幫您算一下，這樣總共是';
  var pizzaPrice = 300;
  var beerPrice = 45;
  var pizzaNum = parseInt(document.getElementById('pizzaNum').value);
  var beerNum = parseInt(document.getElementById('beerNum').value);
  document.getElementById('ok').textContent = count;
  document.getElementById('total').textContent = (pizzaPrice * pizzaNum) + (beerPrice * beerNum)+'元'
}

• 所以輸入資料前與輸入資料後的畫面長下面這個樣子

以上，就是為大家介紹的 JavaScript Function功能，謝謝大家~